.importSuccIcon {
  @apply w-6 h-6 mr-2;
}

.itemBox {
  @apply flex flex-wrap mt-5;
  min-height: calc(100vh - 28.75rem);

  .buildItem {
    @apply relative rounded mr-3 mb-3;
    padding: 0 1.875rem;
    height: 15rem;
    background: linear-gradient(180deg, #252525 0%, #121212 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .btnComm {
      @apply cursor-pointer w-5 h-5 opacity-50;

      &:hover {
        @apply opacity-100;
      }

      &.btnCopy:active {
        content: url('/images/copy-build-active.png');
      }

      &.btnEdit:active {
        content: url('/images/self-edit-active.png');
      }

      &.btnDel:active {
        content: url('/images/delete-build-active.png');
      }
    }

    .selfMenu {
      @apply flex justify-between items-center;
      margin-top: 1.875rem;

      .codeBox {
        @apply flex items-center font-medium text-xl leading-5 text-white;
        height: 1.625rem;
        font-family: Roboto;
        font-feature-settings: 'kern' on;

        & > img {
          @apply ml-3;
        }
      }
    }

    .channelName {
      @apply text-white;
      margin-top: 3.125rem;
      margin-bottom: 4.125rem;
      font-size: 1.75rem;
      line-height: 1.75rem;
      text-transform: capitalize;
      font-feature-settings: 'kern' on;
    }

    .channelNum {
      @apply text-base leading-4 text-white-40;
      text-transform: capitalize;
      font-feature-settings: 'kern' on;
    }

    .channelInfo {
      @apply h-5 flex items-center text-sm text-white-40;
      color: #ccc;

      .noWrap {
        @apply whitespace-nowrap;
      }

      .num {
        @apply inline-block w-7 text-theme;
      }
    }
  }

  .nullBox {
    margin-top: 6.25rem;
  }

  .notLogin {
    @apply flex flex-col items-center justify-center w-full;

    & > span {
      @apply text-white;
      font-size: 1.25rem;
      line-height: 1.625rem;
    }

    .btn {
      @apply bg-theme text-white;
      width: 16.25rem;
      height: 3.75rem;
      margin-top: 2.5rem;
      font-size: 1.25rem;
    }
  }
}

// 最大屏幕
@media screen and (min-width: 120rem) {
  .itemBox {
    .buildItem {
      width: 27.75rem;
      height: 15rem;
    }
  }
}

// 4个
@media screen and (min-width: 91.5625rem) and (max-width: 120rem) {
  .itemBox {
    .buildItem {
      width: calc(calc(100vw - 9rem) / 4);
    }
  }
}

// 3个排布
@media screen and (min-width: 63.0625rem) and (max-width: 91.5rem) {
  .itemBox {
    .buildItem {
      width: calc(calc(100vw - 8.25rem) / 3);
    }
  }
}

// 2个排布
@media screen and (min-width: 767px) and (max-width: 63rem) {
  .itemBox {
    .buildItem {
      width: calc(calc(100vw - 7.5rem) / 2);
    }
  }
}

// 移动端排布
@media screen and (max-width: 767px) {
  .itemBox {
    @apply w-screen px-4;

    .buildItem {
      @apply m-0 mb-3 px-3;
      width: calc(100vw - 2rem);
      height: 10rem;

      .selfMenu {
        @apply mt-5;
      }

      .channelName {
        @apply text-2xl leading-6 mt-5;
        margin-bottom: 1.875rem;
      }
    }
  }
}
